<script setup>
import { ref } from "vue";
import Vue3Danmaku from "vue3-danmaku";

const danmus = ref(["朱毅", "朱毅1", "朱毅2", "..."]);
const danmakuRef = ref();
const handleDmOver = (el) => {
  console.log(el);
};
const closeDanma = () => {
  danmakuRef.value.stop();
};
const startDanma = () => {
  danmakuRef.value.play();
};

defineExpose({
  closeDanma,
  startDanma,
});
</script>

<template>
  <vue3-danmaku
    ref="danmakuRef"
    v-model:danmus="danmus"
    :loop="false"
    style="height: 100%; width: 100%"
    :speeds="100"
    :randomChannel="true"
    :isSuspend="true"
    :channels="0"
    useSlot
    @dm-over="handleDmOver"
    @dm-out="handleDmOut"
  >
    <template v-slot:dm="{ index, danmu }">
      <span class="barrage-style">{{ danmu }}</span>
    </template>
  </vue3-danmaku>
</template>

<style lang="less">
.barrage-style {
  color: #ffffff;
  &:hover {
    // background-color: blue;
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
